<template>
  <div class="payment">
    <header>
      <div @click="goBack">
        <i><img src="@/assets/images/icons/fanhui.png"></i>
      </div>
      <h3>用户结算</h3>
      <div></div>
    </header>
    <section class="address" @click="goAddress()">
      <img src="@/assets/images/icons/direct.png">
      <div class="msg" v-if="address">
        <h3>
          {{address.name}}
          {{address.tel}}
        </h3>
        <div>
          <span>{{ address.province }} </span>
          <span>{{address.city}} </span>
          <span>{{address.district}} </span>
          <span>{{address.address}}</span>
        </div>
      </div>
      <div class="msg" v-else>
        请填写收货地址
      </div>
      <i class="el-icon-arrow-right"></i>
    </section>
    <div>
      支付宝支付
    </div>
    <footer>
      <div>
        <p>共 {{total.num}} 件</p>
        <p> 合计: <span>¥ {{total.price}}</span> </p>
      </div>
      <div class="pay" @click="goPay()">付款</div>
    </footer>
  </div>
</template>

<script>
import {api1} from "@/common/api/request";
import {mapState,mapGetters} from 'vuex';
export default {
  name: "Payment",
  data(){
    return{
      address:'',

    }
  },
  created() {
    this.getData()
  },
  computed:{
    ...mapState({
      list: state => state.cart.list,
      selectedList: state => state.cart.selectedList
    }),
    ...mapGetters(['total'])
  },
  methods:{
    goBack(){ //返回
      this.$router.back()
    },
    goAddress(){
      this.$router.push('/address')
    },
    getData(){
      api1({
        url:'/api/selectAddress',
        method:'POST',
        headers:{
          token:true
        }
      }).then(res => {
        res.forEach(v => {
          if(v.isDefault === '1'){
            this.address = v
          }
        })
      })
    },
    //去支付
    goPay(){
      //判断是否有收货地址
      if(!this.address){
        return Toast('请填写收货地址')
      }
      //订单号
      let dataOrder = {
        orderId:''
      }
      //去支付，发送请求
      api1({
        url:'/api/payment',
        method:'POST',
        headers:{
          token:true,
          'content-type': "application/x-www-form-urlencoded"
        }
      }).then(res => {

      })
    },
  }
}
</script>

<style scoped lang="scss">
.payment{
  background-color: #F7F7F7;
  width: 100vw;
  height: 100vh;
}
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #F7F7F7;
  height: 48px;
  img{
    width: 24px;
    height: 24px;
  }
}
section{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #F4F4F4;
  border-radius: 16px;
  background-color: #FFFFFF;
  margin: 4px;
  padding: 10px;
  div{
    margin: 4px;
  }
  img{
    width: 48px;
    height: 48px;
  }
}
footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  height: 48px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #F4F4F4;
  background-color: #FFFFFF;
  div>p>span{
    font-size: 18px;
    color: orangered;
  }
  .pay{
    height: 30px;
    width: 80px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #F4F4F4;
    background-color: orangered;
  }
}
</style>